import './testing.scss'

import { useNavigate, useParams } from 'react-router-dom'

import { recombinationNavList, getSiblingsByKey } from '../Common/NavCommon'
import { useMount } from 'ahooks';
import { useEffect, useState } from 'react';

const Testing = ({ router, homeKey }) => {
    const onNavigate = useNavigate()
    const { page } = useParams()
    const [ROUTER, setROUTER] = useState([])
    const [CHILD, setCHILD] = useState([])

    const [Active, setActive] = useState()

    useMount(() => { setROUTER(recombinationNavList(router, homeKey)) })

    useEffect(() => {
        if (page !== homeKey) {
            const { key, child } = getSiblingsByKey(ROUTER, page)
            setCHILD(child)
            setActive(key)
        } else {
            setCHILD([])
            setActive(homeKey)
        }
    }, [page, ROUTER])

    return (
        <div className='Testing'>
            <div className='Top'>
                <div className='back' onClick={() => onNavigate(`/Start/${homeKey}`)}>{homeKey !== page ? '返回上级' : ''} </div>
                <div className='weather'>黑龙江哈尔滨市 12­°C 晴</div>
                <div className='title'>鹤伊智慧工地指挥系统</div>
                <div className='time'>2022/05/19星期四 10:33:12</div>
                <div className='option' onClick={() => onNavigate('/Admin')}>操作</div>
            </div>
            {homeKey !== page &&
                <div className='NavA01'>
                    {ROUTER.map(({ key, title, children }) => {
                        return (
                            <div
                                key={key}
                                className={`${key}${Active === key ? ' active' : ''}`}
                                onClick={() => onNavigate(`/Start/${children[0].key}`)}
                            >
                                {title}
                            </div>
                        )
                    })}
                </div>
            }
            {CHILD.length > 1 &&
                <div className='NavA02'>
                    {CHILD.map(({ key, title }) =>
                        <div
                            key={key}
                            className={`${page === key ? 'active' : ''}`}
                            onClick={() => onNavigate(`/Start/${key}`)}
                        >
                            {title}
                        </div>
                    )}
                </div>
            }
        </div>
    );
};

export default Testing;